<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="/static/images/Logo_40.png" type="image/x-icon">
    <title>用户登录</title>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="/static/css/signin.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form id="form" class="form-signin">
            <p id="hint" style="height: 30px; color: red; font-size: 12px"></p>
            <h2 class="form-signin-heading">用户登录</h2>
            <label for="tel" class="sr-only">手机号</label>
            <input type="tel" maxlength="11" id="tel" class="form-control" placeholder="请输入手机号" required autofocus>
            <button id="send" class="btn btn-primary" type="button">发送验证码</button>
            <label for="code" class="sr-only">验证码</label>
            <input type="text" maxlength="6" id="code" class="form-control" placeholder="请输入验证码" required>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 一周以内自动登录
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
            <button id="back" class="btn btn-lg btn-primary btn-block" type="button">返回首页</button>
        </form>
    </div>
    <script>
        let backBtn = document.querySelector('#back')
        backBtn.addEventListener('click', (evt) => {
            location.href = 'home.html'
        })
        let sendBtn = document.querySelector('#send')
        const TEL_PATTERN = /^1[3-9]\d{9}$/
        sendBtn.addEventListener('click', (evt) => {
            let tel = document.querySelector('#tel').value.trim()
            if (TEL_PATTERN.test(tel)) {
                fetch(`/api/mobile/${tel}/`)
                    .then(resp => resp.json())
                    .then(json => alert(json.message))
            } else {
                alert('请输入有效的手机号')
            }
        })
        let form = document.querySelector('#form')
        let hintP = document.querySelector('#hint')
        form.addEventListener('submit', (evt) => {
            evt.preventDefault()
            let tel = document.querySelector('#tel').value.trim()
            let code = document.querySelector('#code').value.trim()
            fetch('/api/auth/', {
                method: 'POST',
                headers: {
                    'content-type': 'application/json'
                },
                body: JSON.stringify({
                    "tel": tel,
                    "code": code
                })
            })
            .then(resp => resp.json())
            .then(json => {
                if (json.code == 10000) {
                    localStorage.token = json.token
                    localStorage.userid = json.userid
                    localStorage.nickname = json.nickname
                    location.href = 'home.html'
                } else {
                    hintP.textContent = json.message
                }
            })
        })
    </script>
</body>
</html>
